<!-- 登录 -->
<template>
  <div class="login">
    <!-- 头部 -->
    <Header />
    <!-- 登录 -->
    <div class="login_form">
      <div v-if="type == 23" class="title">个人会员登录</div>
      <div v-if="type == 24" class="title">企业会员登录</div>
      <div v-if="type == 25" class="title">咨询师登录</div>
      <van-form @submit="onSubmit">
        <!-- 手机号 -->
        <img class="phone" src="../assets/image/Component 107.png" alt="" />
        <van-field
          v-model="loginForm.phone"
          name="phone"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <!-- 验证码 -->
        <div class="pass" v-if="yzmTolle">
          <img
            class="password"
            src="../assets/image/Component 108.png"
            alt=""
          />
          <van-field
            ref="form"
            v-model="loginForm.code"
            type="text"
            name="code"
            label="验证码"
            placeholder="验证码"
            :rules="[{ required: true, message: '请填验证码' }]"
          >
            <template #button>
              <div class="button" v-if="show" @click="getCode(count)">
                发送验证码
              </div>
               <van-button
                class="login_button"
                type="primary"
                disabled
                v-if="!show"
                size="small"
                >{{ count }} s</van-button
              >
            </template>
          </van-field>
        </div>
        <!-- 密码 -->
        <div class="pass" v-else>
          <img
            class="password"
            src="../assets/image/Component 108.png"
            alt=""
          />
          <van-field
            ref="form"
            v-model="loginForm.code"
            type="text"
            name="code"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          >

          </van-field>
        </div>
        <!-- 登录按钮 -->
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
        <!-- 注册按钮 -->
        <div style="margin: 16px" @click="regist()">
          <van-button round block type="info">切换登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { getMobilelogin } from "../api/index/index";
export default {
  data() {
    return {
      loginForm: {
        phone: "",
        code: "",
      },
      count: 3,
      type: "",
      show: true,
      phone: "",
      code: "",
      logi: [],
      yzmTolle:true
    };
  },
  mounted() {
    let vm = this;
    vm.type = vm.$route.query.id;
    // vm.getLogi();
  },
  methods: {
    ...mapMutations(["changeLogin"]),
    onSubmit(values) {
      let vm = this;
      if (vm.loginForm.phone === "" || vm.loginForm.code === "") {
        alert("手机号或验证码不能为空");
        return flase;
      }
      vm.getMobilelogin();
    },
    // 登录接口
    async getMobilelogin() {
      let vm = this;
      if(vm.yzmTolle){
      var params = {
        mobile: vm.loginForm.phone,
        captcha: vm.loginForm.code,
      };
      }else{
          var params = {
        mobile: vm.loginForm.phone,
        password: vm.loginForm.code,
      };
      }

      const res = await getMobilelogin(params);
      console.log(res, "登录");
      if (res.data.code == 1) {
        console.log("111");
        this.$toast(res.data.msg);
        setTimeout(() => {
          this.$router.push("/");
        }, 1500);
      } else {
        //登录失败的业务处理
        this.$toast(res.data.msg);
      }
    },
    //60s倒计时
    getCode() {
      this.show = false;
      this.count = 60;
      let timer = null;
      timer = setInterval(() => {
        if (this.count > 0 && this.count <= 60) {
          this.count--;
        } else {
          clearInterval(timer);
          this.show = true;
          this.timer = null;
        }
      }, 1000);
    },

    //切换登录
    regist() {
      this.yzmTolle = !this.yzmTolle

    }
  },
  watch: {
    $route: function (to, from) {
      if (to.query.id != from.query.id) {
        let vm = this;
        vm.type = this.$route.query.id;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  .login_form {
    width: 100%;
    height: 674px;
    // width: 375px;
    margin-top: 6px;
    background: url("../assets/image/Component 149.png");
    background-size: 100% 100%;
    .title {
      height: 27px;
      width: 108px;
      font-weight: 500;
      font-size: 18px;
      line-height: 27px;
      color: #ffffff;
      margin-left: 132px;
      padding-top: 97px;
    }
    // 登录表单
    .van-form {
      margin-top: 58px;
      width: 304px;
      margin-left: 26px;
      position: relative;
      //   手机号
      .phone {
        display: inline-block;
        position: absolute;
        top: 15px;
        left: 25px;
      }
      //   验证码
      .pass {
        position: relative;
        .password {
          position: absolute;
          top: 15px;
          left: 25px;
        }
        .button {
          color: #fff;
        }
        .login_button {
          width: 80px;
          border: rgba(0, 0, 0, 0);
          .van-button__text {
            font-size: 10px;
          }
        }
      }

      .van-cell {
        margin-left: 61px;
      }
    }
    /deep/ .van-cell {
      width: 260px;
      background-color: rgba(0, 0, 0, 0);
    }
    /deep/ .van-cell .van-field__label {
      width: 42px;
    }
    /deep/ .van-cell__title,
    .van-field__control {
      color: #fff;

    }
    /deep/.van-field__control {
      color: #fff;
    }
    /deep/ .van-field__body input{
      background: transparent;
      outline: none ;
    }
    /deep/ .van-button {
      background-color: rgba(0, 0, 0, 0);
      border: 1px solid #fff;
    }
  }
}
</style>